var React = require('react');

var Detail = React.createClass({
	
		getDefaultProps:function(){
			return {
				url1:'http://localhost:3000/db',
				url2:'http://localhost:3001/content'
			}
		},
		getInitialState:function(){
			return {
				list:{},
				content:{}
			}
		},
		componentWillMount:function(){
			var _this = this;
			$.ajax({url:this.props.url1}).then(function(res){
				for (var i = 0 , dataLength=res.subjects.length; i < dataLength; i++) {

					if(res.subjects[i].id == _this.props.params.id){

						_this.setState({
							list: res.subjects[i]
							
						})
					}
				}

			});
			$.ajax({url:this.props.url2}).then(function(res){
				var listL = [];
				for (var i = 0 , dataLength=res.length; i < dataLength; i++) {
					
					if(res[i].address == _this.props.params.id){
						
						
						listL.push(res[i])
						
					}
				};

				_this.setState({
							content: listL
							
						});
				
			});
			
		},
		handlerSubmit:function(e){
			var _this = this;
				e.preventDefault();
				var formData ={
					title: this.refs.goodInput.value,
					content:this.refs.goodTextarea.value
				}
				
				var time=new Date();
				
				time=time.getFullYear()+'-'+(time.getMonth()+1)+'-'+time.getDate()+' '+time.getHours()+':'+time.getMinutes()+':'+time.getSeconds();
				$.ajax({
				    type: 'post',
				    url: 'http://localhost:3001/content',
				    data: {
				    	
				    	
		    			  "address":_this.props.params.id,
					      "username":"username",
					      "title": formData.title,
					      "date": time,
					      "contentsHTML": formData.content 
					  	
					  }
				  });
				  location.reload([true]) 		
		},
		render:function(){
			if (this.state.content.length > 0) {
				console.log(this.state.content)
				var dataContent = this.state.content;
				var contentH = [];
				for (var i = 0 , leng =dataContent.length; i < leng; i++) {
					contentH.push(
					<li key={i}>
					<p>{dataContent[i].title}</p>
					<p>{dataContent[i].date}</p>
					<p>{dataContent[i].contentsHTML}</p>
					</li>
					)
				}
				
			}
			
			if (this.state.list.year > 0) {
				
				var data = this.state.list
				var lst = [];
				lst.push(
					<div key={1}>
					<div className="show container-fluid">
					      <div className="above  clear">
						          <div className="left col-md-3 col-md-offset-1">
						            <img src={data.images.large} />
						          </div>
						          <div className="center col-md-3 col-md-offset-1">
						            <h3>{data.title}</h3>
						            <p>导演：{data.directors[0].name}</p>
						            <p>主演：{data.casts[0].name}、{data.casts[1].name}、{data.casts[2].name}</p>
						            <p>类型：{data.genres[0]}、{data.genres[1]}、{data.genres[2]}</p>
						            <p>上映日期：{data.year}年</p>
						            <p>评分：{data.rating.average}分</p>
						          </div>
						          <div className="right col-md-3 ">
						            <img src={data.casts[0].avatars.small} />
						            <img src={data.casts[1].avatars.small} />
						            <img src={data.casts[2].avatars.small} />
						          </div>
					        </div>
					        <div className="below col-md-10 col-md-offset-1">
					          <p>
								
					          </p>
					          <p>
					            
					          </p>
					       </div>
				    </div>
				    <div className="next container-fluid">
                        <div className="comment col-md-7 col-md-offset-1">
                            <div className="write">
                              <h3><span className="glyphicon glyphicon-pencil"></span> 写影评</h3>
                            </div>
                            <form onSubmit={this.handlerSubmit}>
                              <label className="form-group one">
                                <span>标题：</span>
                                <input type="text" name="title" ref="goodInput"/>
                              </label>
                              <label className="two">
                                <span> 内容：</span>
                                <textarea cols="70" rows="8" name="content" id="content" className="xheditor" ref="goodTextarea"></textarea>
                              </label>
                              <label className="three">
                                <input type="submit" name="submit" value="提交" className=" btn btn-success" />
                              </label> 
                            </form>
                            <div className="list">
                                 <ul>
                                   
                                  {contentH}
                                 
                                 </ul>
                            </div>
                    	</div>
    				</div> 
    				</div>
				)
			}
			
		return (
			<div>
				{lst}
			</div>
		)
	}
});

module.exports = Detail;





		